<template>
  <div class="search">
    <Card>
      <Row @keydown.enter.native="handleSearch">
        <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
          <Form-item label="申请时间">
            <DatePicker v-model="selectDate" type="datetimerange" format="yyyy-MM-dd" clearable @on-change="selectDateRange" placeholder="选择起始时间" style="width: 300px"></DatePicker>
          </Form-item>
          <Form-item label="手机号" prop="mobile">
            <Input type="text" v-model="searchForm.mobile" placeholder="请输入手机号" clearable style="width: 200px" />
          </Form-item>
          <Form-item label="区域" prop="name">
            <regionArea ref="region" style="width: 350px" @selected="selectedRegions" :showIs="true" background="请选择省市区" />
          </Form-item>
          <Form-item label="审核状态" prop="auditStates">
            <Select v-model="searchForm.auditStates" placeholder="请选择" clearable style="width: 200px">
              <Option value="APPLYING">审核中</Option>
              <Option value="REFUSED">审核拒绝</Option>
            </Select>
          </Form-item>
          <Button @click="handleSearch" class="search-btn" type="primary" icon="ios-search">搜索</Button>
          <Button class="search-btn" type="primary" @click="handleReset">重置</Button>
        </Form>
      </Row>
      <div style="margin-top: 12px;">
        <download-excel class="export-excel-wrapper" :data="data" :fields="fields" :fetch="exportExcel" name="合伙人审核列表.xls">
          <Button type="info" class="export">
            导出
          </Button>
        </download-excel>
      </div>
      <Table :loading="loading" border :columns="columns" class="mt_10" :data="data" ref="table"></Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50, 100]" size="small" show-total show-elevator show-sizer></Page>
      </Row>
    </Card>
    <!-- 审核模态框 start -->
    <Modal v-model="applyFlag" @on-cancel="close">
      <p slot="header" style="color: #f60; text-align: center">
        <Icon type="ios-information-circle"></Icon>
        <span>{{ applyTitle }}</span>
      </p>
      <div style="text-align: center">
        <p v-show="rejectFlag == false">您确认要审核通过</p>
        <Form ref="reject" v-show="rejectFlag" :model="reject" :rules="applyRule" label-position="left" :label-width="100">
          <FormItem label="驳回理由" prop="valueName">
            <Input type="textarea" v-model="reject.valueName" placeholder="请输入驳回理由" :autosize="{ minRows: 2, maxRows: 5 }"></Input>
          </FormItem>
        </Form>
      </div>
      <div slot="footer">
        <Button type="error" @click="audit('REFUSED')">驳回</Button>
        <Button type="info" @click="audit('PASS')">通过</Button>
      </div>
    </Modal>
    <!-- 审核模态框 end -->
  </div>
</template>

<script>
import JsonExcel from "vue-json-excel"
import region from "@/views/lili-components/region"
import * as API_Member from "@/api/member.js"
import * as API_Partner from "@/api/partner.js"
import * as API_Agent from "@/api/agent.js"
import * as RegExp from "@/libs/RegExp.js"
import ossManage from "@/views/sys/oss-manage/ossManage"
import regionArea from "@/views/agent-manage/region"
import bindMemberModal from "@/views/partner-manager/components/bindMember"
import {
  vector
} from "echarts"

export default {
  name: "user-partner",
  components: {
    region,
    regionArea,
    ossManage,
    bindMemberModal,
    downloadExcel: JsonExcel,
  },
  data () {
    return {
      loading: false,
      total: 0,
      data: [],
      selectDate: null, // 选择时间段
      searchForm: {
        // 请求参数
        pageNumber: 1,
        pageSize: 10,
        auditState: undefined, // 审核状态
        mobile: "", //联系方式
        regionId: "", //区域
        beginTime: "", //创建时间
        endTime: "",
      },
      // 表格的表头以及内容
      fields: {
        会员昵称: "nickName",
        手机号码: {
          field: "mobile",
          callback: (value) => {
            return "&nbsp;" + value
          }
        },
        姓名: "realName",
        身份证号: {
          field: "idCardNumber",
          callback: (value) => {
            return "&nbsp;" + value
          }
        },
        区域: "locationName",
        申请身份类型: "partnerName",
        推广人姓名: "nameExte",
        推广人电话: {
          field: "mobileExte",
          callback: (value) => {
            return "&nbsp;" + value
          }
        },
        推广人级别: "gradeNameExte",
        推广人身份类型: "partnerExte",
        端口费现金额: "duanKouFeiXJ",
        对应焕贝额: "duanKouFeiHB",
        申请时间: "createTime",
        审核时间: "auditTime",
        审核状态: {
          field: "auditState",
          callback: (value) => {
            if (value == "APPLYING") {
              return "待审核"
            } else if (value == "PASS") {
              return "通过"
            } else if (value == "REFUSED") {
              return "已驳回"
            }
          },
        },
        备注: "auditRemark"
      },
      columns: [{
        title: "序号",
        type: "index",
        width: 80,
        align: "center",
      },
      {
        title: "会员昵称",
        key: "nickName",
        width: "150",
        tooltip: true,
      },
      {
        title: "手机号码",
        key: "mobile",
        width: "150",
      },
      {
        title: "姓名",
        key: "realName",
        width: "150",
        tooltip: true,
      },
      {
        title: "身份证号",
        key: "idCardNumber",
        width: "150",
        tooltip: true,
      },
      {
        title: "区域",
        key: "partnerRegion",
        width: "300",
        tooltip: true,
      },
      {
        title: "申请身份类型",
        key: "partnerName",
        width: "150",
      },
      {
        title: "推广人姓名",
        key: "nameExte",
        width: "300",
        tooltip: true,
      },
      {
        title: "推广人电话",
        key: "mobileExte",
        width: "300",
        tooltip: true,
      },
      {
        title: "推广人级别",
        key: "gradeNameExte",
        width: "300",
        tooltip: true,
      },
      {
        title: "推广人身份类型",
        key: "partnerExte",
        width: "300",
        tooltip: true,
      },
      {
        title: "端口费现金额",
        key: "duanKouFeiXJ",
        width: "300",
        tooltip: true,
      },
      {
        title: "对应焕贝额",
        key: "duanKouFeiHB",
        width: "300",
        tooltip: true,
      },
      {
        title: "申请时间",
        key: "createTime",
        width: "250",
      },
      {
        title: "审核时间",
        key: "auditTime",
        width: "250",
      },
      {
        title: "审核状态",
        key: "auditState",
        width: 130,
        render: (h, params) => {
          if (params.row.auditState == "APPLYING") {
            return h(
              "Tag", {
              props: {
                color: "volcano",
              },
            },
              "待审核"
            )
          } else if (params.row.auditState == "PASS") {
            return h(
              "Tag", {
              props: {
                color: "green",
              },
            },
              "通过"
            )
          } else if (params.row.auditState == "REFUSED") {
            return [
              h("Tag", {
                props: {
                  color: "red"
                }
              }, "已驳回")
            ]
          }
        },
      },
      {
        title: "备注",
        key: "auditRemark",
        width: "250",
      },
      {
        title: "操作",
        key: "action",
        align: "center",
        width: 200,
        fixed: "right",
        render: (h, params) => {
          return h(
            "div", {
            style: {
              display: "flex",
              justifyContent: "center",
            },
          },
            [
              h(
                "Button", {
                props: {
                  type: "info",
                  size: "small",
                },
                style: {
                  marginRight: "5px",
                  display: "block",
                },
                on: {
                  click: () => {
                    this.detail(params.row)
                  },
                },
              },
                "详情"
              ),
              h(
                "Button", {
                props: {
                  type: "success",
                  size: "small",
                },
                style: {
                  display: params.row.auditState == "APPLYING" ? "" : "none",
                },
                on: {
                  click: () => {
                    this.apply(params.row)
                  },
                },
              },
                "审核"
              )
            ]
          )
        },
      },
      ],
      // 审核 start
      reject: {
        valueName: "",
      }, //驳回理由绑定输入的数据
      applyRule: {
        // 审核验证规则
        valueName: [{
          required: true,
          message: "请输入驳回理由",
        },],
      },
      rejectFlag: false, //显示驳回理由多行输入框
      dataDetailContent: "", //审核所点击的数据
      applyFlag: false, //审核框
      applyTitle: "", //审核数据标题
      // 审核 end
    }
  },
  methods: {
    selectDateRange (v) {
      if (v) {
        this.searchForm.beginTime = v[0]
        this.searchForm.endTime = v[1]
      }
    },
    // 选中的地址
    selectedRegions (val) {
      this.searchForm.regionId = val[0]
    },
    // 搜索
    handleSearch () {
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = 10
      if (!this.searchForm.auditState) {
        this.searchForm.auditState === 'APPLYING,REFUSED'
      }
      this.getData()
    },
    // 重置
    handleReset () {
      this.selectDate = ""
      this.searchForm = {
        // 请求参数
        pageNumber: 1,
        pageSize: 10,
        auditState: undefined, // 审核状态
        mobile: "", //联系方式
        regionId: "", //区域
        beginTime: "", //创建时间
        endTime: "",
      }
      this.$refs.region.addr = []
      this.getData()
    },
    //查看会员详情
    detail (row) {
      this.$router.push({
        name: "user-partner-detail",
        query: {
          id: row.id,
        },
      })
    },
    // 审核
    apply (row) {
      console.log(row)
      let that = this
      that.dataDetailContent = row
      that.applyFlag = true
      that.applyTitle = "审核" + row.username + "合伙人"
    },
    // 审核弹框点击关闭按钮清空操作的数据
    close () {
      let that = this
      that.applyFlag = false
      that.rejectFlag = false
      that.reject.valueName = ""
    },
    // 驳回/通过
    audit (operation) {
      let that = this
      // 驳回状态
      if (operation == "REFUSED") {
        that.rejectFlag = true
        this.$refs.reject.validate((valid) => {
          if (valid) {
            let param = {
              id: that.dataDetailContent.id,
              auditState: "REFUSED",
              auditRemark: that.reject.valueName,
            }
            API_Agent.auditPartner(param).then((res) => {
              if (res.code == 200) {
                // // 再次调用驳回接口
                this.$Message.success("驳回成功")
                that.applyFlag = false
                that.rejectFlag = false
                that.reject.valueName = ""
                that.getData()
              }
            })
          }
        })
      } else {
        let param = {
          id: that.dataDetailContent.id,
          auditState: "PASS",
        }
        API_Agent.auditPartner(param).then((res) => {
          if (res.code == 200) {
            this.$Message.success("审核通过")
            that.applyFlag = false
            that.rejectFlag = false
            that.reject.valueName = ""
            that.getData()
          }
        })
      }
    },
    // 分页 改变页码
    changePage (v) {
      this.searchForm.pageNumber = v
      this.getData()
    },
    // 分页 改变页数
    changePageSize (v) {
      this.searchForm.pageSize = v
      this.searchForm.pageNumber = 1
      this.getData()
    },
    //查询会员列表
    getData () {
      this.loading = true
      if (this.searchForm.regionId) {
        this.searchForm.regionId = this.searchForm.regionId.toString()
      }
      if (!this.searchForm.auditStates) {
        this.searchForm.auditStates = 'APPLYING,REFUSED'
      }
      API_Partner.getPartnerListData(this.searchForm).then((res) => {
        if (res.result.records) {
          this.loading = false
          this.data = res.result.records
          this.total = res.result.total
        }
      })
    },
    // 导出
    async exportExcel () {
      const params = JSON.parse(JSON.stringify(this.searchForm))
      params.pageNumber = 1
      params.pageSize = 999999999
      const result = await API_Partner.getMemberListData(params)
      if (result.success) {
        if (result.result.records.length === 0) {
          this.$Message.warning('暂无审核数据')
          return []
        } else {
          return result.result.records
        }
      } else {
        this.$Message.warning('导出审核数据失败，请重试')
      }
    }
  },
  mounted () {
    this.getData()
  },
};
</script>
<style lang="scss" scoped>
/deep/ .ivu-table-wrapper {
  width: 100%;
}

/deep/ .ivu-card {
  width: 100%;
}
</style>
